<template>
    <div class="page bg-white">
        <el-select v-model="checkOptionsList" multiple placeholder="请选择" size="small">
            <el-option v-for="item in departmentList" :key="item.id"  :label="item.name" :value="item.id"></el-option>
        </el-select>
        <el-button size="small" type="primary" @click="moreDepartment">确 定</el-button>
        <el-button size="small" @click="resetList">清空</el-button>
        <div style="width:100%;text-align:center;font-weight:600;font-size:20px;margin-bottom:10px"><p>{{currentYears}}年{{fatherMeanName}}税务报表</p></div>
        <el-tabs type="border-card" @tab-click="handleClick" v-model="handleClickNum" style="height:100%">
            <el-tab-pane :key="index" v-for="(item, index) in optionsList" :label="item.name" :name="item.id">
                <div class="top">
                    <el-table :data="tableData" :cell-style="cellStyle"
                    style="border: 1px solid #d6cfe2;"
                    :header-cell-class-name="cellHeadStyle" v-loading="ListLoading"
                    :row-class-name="tableRowClassName" :summary-method="getSummaries" show-summary
                      size="small"
                    class="table">
                        <el-table-column type="index" width="200" label="税务明细" fixed="left" align="center" show-overflow-tooltip  :index="indexMethod"/>
                        <el-table-column prop="january" label="1月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'01')">{{scope.row.january}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="february" label="2月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'02')">{{scope.row.february}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="march" label="3月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'03')">{{scope.row.march}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="april" label="4月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'04')">{{scope.row.april}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="may" label="5月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'05')">{{scope.row.may}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="june" label="6月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'06')">{{scope.row.june}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="july" label="7月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'07')">{{scope.row.july}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="august" label="8月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'08')">{{scope.row.august}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="september" label="9月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'09')">{{scope.row.september}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="october" label="10月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'10')">{{scope.row.october}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="november" label="11月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'11')">{{scope.row.november}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="december" label="12月" align="center" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <el-link :underline="false"   @click="amountDetails(scope.row ,'12')">{{scope.row.december}}</el-link>
                            </template>
                        </el-table-column>
                        <el-table-column prop="total" label="合计" align="center" show-overflow-tooltip></el-table-column>
                        <el-table-column prop="remarks" label="备注" width="250" show-overflow-tooltip>
                            <template slot-scope="scope">
                                <div style="display:flex">
                                    <div style="flex:1">{{scope.row.remarks}}</div>
                                    <el-button v-if="RemarksPermissions==='0'" type="text" size="mini" @click="updateRemarksOld(scope.row)">修改</el-button>
                                </div>
							</template>
                        </el-table-column>
                    </el-table>
                </div>
                
            </el-tab-pane>
        </el-tabs>
        <el-dialog width="50%" :visible.sync="costDetailDialog" v-dialogDrag title="办公费用明细">
            <el-table :data="costDetailList" :cell-style="cellStyle"
                    style="border: 1px solid #d6cfe2;"
                    :header-cell-class-name="cellHeadStyle"
                    :row-class-name="tableRowClassName" :summary-method="getSummaries" show-summary
                      size="small"
                    class="table">
                        <el-table-column prop="strdate" label="时间" align="center" show-overflow-tooltip/>
                        <el-table-column prop="department.name" label="部门" align="center" show-overflow-tooltip/>
                        <el-table-column prop="user.name" label="操作人" align="center" show-overflow-tooltip/>
                        <el-table-column prop="money" label="金额" align="center" show-overflow-tooltip/>
                        <el-table-column prop="remark" label="备注" show-overflow-tooltip/>
                    </el-table>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="costDetailDialog=false">关闭</el-button>
                <el-button size="small" type="primary" @click="costDetailDialog=false">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog width="30%" :visible.sync="updateRemarkslDialog" v-dialogDrag title="备注"  show-overflow-tooltip >
            <el-form ref="editRemarks">
                <el-form-item  size="small" label="备注" label-width="80px" prop="remarks">
                    <el-input v-model="editRemarks.remarks" type="textarea" ></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="small" @click="updateRemarkslDialog=false">关闭</el-button>
                <el-button size="small" type="primary" @click="updateRemarks">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import tableStyles from "../../../../utils/mixins.js";
export default {
    mixins: [tableStyles],
    data() {
        return {
            costTitle:"",//明细弹框标题（动态）
            department:"",//部门id
            ListLoading:false,
            currentYears:"",//当前年
            currentMonths:"",//当前月
            handleClickNum:"0",
            checkOptionsList:"",
            departmentList:[],
            //二级科目名称
            header: [],
            optionsList:[//选项卡（总表、部门、项目..）
                {
                    id:"0",
                    name: '税务总表',
                }
            ],
            //二级科目数据
            tableData: [],
            costDetailDialog:false,//费用明细
            costDetailList:[
                {data:"2021/8",department:"研发部",money:"200",remark:""},
                {data:"2021/8",department:"研发部",money:"200",remark:""},
                {data:"2021/8",department:"研发部",money:"200",remark:""},
                {data:"2021/8",department:"研发部",money:"200",remark:""},
                {data:"2021/8",department:"研发部",money:"200",remark:""},
            ],
            updateRemarkslDialog:false,//根据权限修改备注
            RemarksPermissions:"",
            editRemarks:{
                id:"",
                remarks:"",
            }
        }
    },
    computed:{
        fatherMeanName: {
            get () {
                return this.$store.state.common.fatherMeanName
            }
        },
    },
    mounted(){
        this.getCurrentTime();
        this.getCompanyByOffice();
        this.getYearList();
    },
    methods:{
        moreDepartment(){
            console.log("搜索",this.checkOptionsList);
            this.department=this.checkOptionsList.join(',');
            this.getYearList();
        },
        resetList(){
            this.checkOptionsList=[];
            this.department="";
            this.getYearList();
        },
        updateRemarksOld(row){
            console.log(row);
            this.updateRemarkslDialog=true;
            this.editRemarks.id=row.id;
            this.editRemarks.remarks=row.remarka;
        },
        updateRemarks(){
            this.$http({
                url: "/rf/tax/updateTaxRemarks",
                method: "post",
                params: {
                    id: this.editRemarks.id,
                    remarks:this.editRemarks.remarks,
                    type:"0"
                },
            }).then(({ data }) => {
                if (data && data.success) {
                    console.log(data);
                    this.getYearList();
                    this.updateRemarkslDialog=false;
                }
            });
        },
        // 表格 表头纵向现实
        indexMethod(index) {
            return this.header[index]
        },
        //选项卡点击
        handleClick() {
            console.log(this.handleClickNum);
            if(this.handleClickNum!=0){
                this.department=this.handleClickNum;
            }
            this.getYearList();
            this.department="";
            
        },
        // 获取当前时间（年份）
        getCurrentTime() {
        　　this.currentYears = new Date().getFullYear(); 
        },
        //查询部门（选项卡）
        getCompanyByOffice(){
            this.$http({
                url: "/sys/office/getCompanyByOffice",
                method: "get",
                params: {
                    company: this.$store.state.user.companyId
                },
            }).then(({ data }) => {
                this.departmentList=data.List;
                if (data && data.success) {
                    data.List.forEach(item =>{
                        this.optionsList.push(item);
                    })
                } else {
                }
            });
        },
        // 查询税务列表
        getYearList(){
            this.$http({
                url: "/rf/tax/getYearList",
                method: "get",
                params: {
                    company: this.$store.state.user.companyId,
                    department:this.department
                },
            }).then(({ data }) => {
                if (data && data.success) {
                    this.tableData=data.list;
                    this.header = []
                    data.list.forEach(item =>{
                        this.header.push(item.taxname.taxName);
                    })
                    // this.ListLoading = false;
                    
                } else {
                    // this.ListLoading = false;
                }
            });
        },
        //金额明细
        amountDetails(row,month){
            console.log(row,month);
            this.currentMonths=month;
            this.amountDetailsId=row.id;
            this.costDetailDialog=true;
            this.$http({
                url: "/rf/tax/getDateList",
                method: "get",
                params: {
                    company: this.$store.state.user.companyId,
                    department:row.department.id,
                    taxstatement:this.amountDetailsId,
                    strdate:this.currentYears+"-"+this.currentMonths
                },
            }).then(({ data }) => {
                if (data && data.success) {
                    console.log("费用明细1",data.list)
                    this.costDetailList=data.list;
                }
            });
        },
        //总表合计
        getSummaries(param) {
            const { columns, data } = param;
            const sums = [];
            columns.forEach((column, index) => {
            if (index === 0) {
                sums[index] = '总计 (元)';
                return;
            }
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
                sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                    return prev + curr;
                } else {
                    return prev;
                }
                }, 0);
                sums[index] += ' ';
            } else {
                sums[index] = '';
            }
            });

            return sums;
        }
    }
}
</script>
<style scoped>

</style>
